<template>
    <div>
        <!--dialog-->
        <el-dialog title="编辑项目" :visible.sync="editProjectDialogVisi" width="80%" :before-close="close">
            <el-form :model="userData" :rules="rules" ref="editProjectForm">
                <el-row :gutter="10">
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="项目编号" :label-width="formLabelWidth" prop="projectSeq">
                            <el-input size="small" v-model="userData.projectSeq" auto-complete="off" :disabled="true">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="项目标题" :label-width="formLabelWidth" prop="proTitle">
                            <el-input size="small" v-model="userData.proTitle" auto-complete="off" :disabled="false">
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="图片数量" :label-width="formLabelWidth" prop="picNum">
                            <el-input size="small" v-model="userData.picNum" auto-complete="off" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="访问数量" :label-width="formLabelWidth" prop="accessCount">
                            <el-input size="small" v-model="userData.accessCount" auto-complete="off" ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                            <el-select v-model="userData.status" placeholder="请选择">
                                <el-option  :key=0 label="未开始" :value=0></el-option>
                                <el-option  :key=1 label="开始" :value=1 > </el-option>
                                <el-option  :key=2 label="完毕" :value=2> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="是否显示" :label-width="formLabelWidth" prop="showFlag">
                            <el-select v-model="userData.isShow" placeholder="请选择">
                                <el-option  :key=0 label="显示" :value=0 ></el-option>
                                <el-option  :key=1 label="隐藏" :value=1 > </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="开始时间" :label-width="formLabelWidth" prop="updateTime">
                            <el-date-picker
                                v-model="userData.updateTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="12:00:00"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime">
                            <el-date-picker
                                v-model="userData.endTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="12:00:00"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="分享标题" :label-width="formLabelWidth" prop="shareTitle">
                            <el-input size="small" v-model="userData.shareTitle" auto-complete="off" :disabled="false"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="优先级" :label-width="formLabelWidth" prop="sOrder">
                            <el-input size="small" v-model="userData.sOrder" auto-complete="off" :disabled="false"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="类型" :label-width="formLabelWidth" prop="classtype"  >
                            <el-select v-model="classtype1" placeholder="请选择" multiple >
                                <!--<el-option  :key=0 label="默认" :value=0></el-option>-->
                                <el-option  :key=1 label="宠物" :value=1 > </el-option>
                                <el-option  :key=2 label="会议" :value=2> </el-option>
                                <el-option  :key=3 label="培训" :value=3> </el-option>
                                <el-option  :key=4 label="演出" :value=4> </el-option>
                                <el-option  :key=5 label="音乐节" :value=5> </el-option>
                                <el-option  :key=6 label="运动" :value=6> </el-option>
                                <el-option  :key=7 label="展会" :value=7> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>


                <el-row>
                    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                        <el-form-item label="项目描述" :label-width="formLabelWidth" prop="proDesc">
                            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="userData.proDesc">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">

                        <el-form-item label="分享描述" :label-width="formLabelWidth" prop="shareDesc">
                            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="userData.shareDesc">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-form-item label="访问url" :label-width="formLabelWidth" prop="proDesc">
                            <el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="userData.accessUrl" readonly="true" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <div style="text-align: center">
                        <el-button size="small" type="primary" @click="updProjectBasic">修改</el-button>
                    </div>
                </el-row>

                <el-row style="margin-top: 20px;">
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="封面图" :label-width="formLabelWidth" prop="coverImgShow">
                            <input type="file" ref="coverImg11" />
                            <el-button  size="mini" @click="uploadImg('coverImg')" >修改</el-button>
                            <img  :src="pic1" alt="" width="150px" height="100px;"
                                 @click="openImgInNewWindow(pic1)" ref="img11" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="分享图" :label-width="formLabelWidth" prop="coverImgShow">
                            <input type="file" ref="shareIconImg22" />
                            <el-button  size="mini" @click="uploadImg('shareIconImg')" >修改</el-button>
                            <img  :src="pic2" alt="" width="150px" height="100px;"
                                 @click="openImgInNewWindow(pic2)"  ref="img22" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="colw" :sm="colw" :md="colw" :lg="colw" :xl="colw">
                        <el-form-item label="广告图" :label-width="formLabelWidth" prop="coverImgShow">
                            <input type="file" ref="advertiseImg33" />
                            <el-button  size="mini" @click="uploadImg('advertiseImg')" >修改</el-button>
                            <img  :src="pic3" alt="" width="150px" height="100px;"
                                 @click="openImgInNewWindow(pic3)"  ref="img33" />
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>

            <div slot="footer" class="dialog-footer" align="center">
                <el-button size="small" @click="close" >关闭</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
    import * as appServer from '../../store/appServerParams.js'

    export default {
        props : {
            editProjectDialogVisi: false,
            userData : {
                coverImgPath : "" ,
                classtype :[ ], //无效
            },
        },
        data() {
            return {
                rules: {
                },
                formLabelWidth: '120px',
                colw : 8,
                pic1 :"",
                pic2 :"",
                pic3 :"",
                classtype1 :[],
            }
        },

        methods: {
            initImg(){
                let vm = this;
                this.pic1 = vm.$parent.editProjectInfo.userData.coverImgPath
                this.pic2 = vm.$parent.editProjectInfo.userData.shareIconImgPath
                this.pic3 = vm.$parent.editProjectInfo.userData.advertiseImgPath
                this.classtype1 = JSON.parse(vm.$parent.editProjectInfo.userData.classtype);
            },
            uploadImg( type ) {
                console.log(  type );
                let vm = this;
                let path = "photo/editProjectPic";
                let params = new FormData();

                if(  type =="coverImg" ){
                    let img1 = vm.$refs.coverImg11.files[0];
                    params.append('img', img1, img1.name);
                }else if( type == "shareIconImg" ){
                    let img1 = vm.$refs.shareIconImg22.files[0];
                    params.append('img', img1, img1.name);
                }else if( type == "advertiseImg" ){
                    let img1 = vm.$refs.advertiseImg33.files[0];
                    params.append('img', img1, img1.name);
                }
                params.append("utype" , type  );
                params.append("pid" , vm.userData.projectId  );
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                };

                vm.$http.post(path, params, config)
                    .then(function (response) {
                        if (response.data.result) {
                            vm.$message({
                                message: vm.$t('Success'),
                                type: 'success'
                            });
                            if(  type =="coverImg" ){
                                // vm.$emit("refreshImg" ,'coverImg' ,newp  )
                                vm.pic1 = appServer.BASE_URL + response.data.newpath;
                            }else if( type == "shareIconImg" ){
                                vm.pic2 = appServer.BASE_URL + response.data.newpath;
                            }else if( type == "advertiseImg" ){
                                vm.pic3 = appServer.BASE_URL + response.data.newpath;
                            }
                        } else {
                            vm.$message.error(vm.$t('Failed'));
                        }
                    }).catch(function (error) {
                    vm.$message.error(vm.$t('Failed'));
                    console.log(error)
                });

            },
            close(){
                let vm = this
                vm.$refs.editProjectForm.resetFields()
                vm.$parent.editProjectInfo.editProjectDialogVisi = false
                vm.$parent.refreshTable();
            },
            openImgInNewWindow: function (  url ) {
                window.open( url ) ;
            },
            updProjectBasic(){
                let vm = this

                vm.userData.classtype = vm.classtype1;
                vm.$http.post('photo/editProject', {
                        proInfo : JSON.stringify(vm.userData)
                    })
                    .then(function (response) {
                        if(response.data.result){
                            vm.$message({
                                message: vm.$t('Success'),
                                type: 'success'
                            });
                        }else {
                            vm.$message.error(vm.$t('Failed'));
                        }
                    }).catch(function (error) {
                    console.log(error)
                })
            },

        },
        created: function () {
            let vm = this
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .el-dialog .el-input{
        width: 90%;
    }
    .el-dialog .el-select{
        width: 100%;
    }
</style>
